
import RouterLink from './RouterLink.vue'
import RouterView from './RouterView.vue'

// 创建一个类
class Borouter {
    constructor(options) {
        // 判断传入的模式
        this.mode = options.mode || "hash"
        // 传入的路由配置列表
        this.routes = options.routes || []
        // 根据配置创建路由的匹配映射
        this.routesMap = this.createMap(this.routes)

        // 当前路径
        this.history = {
            current: null
        }

        // 根据模式来初始化路由
        this.init()
    }
    init() {
        // 判断有无hash
        if (this.mode == 'hash') {
            location.hash || (location.hash = "/")
            // 记录当前路径 当初始的 HTML 文档被完全加载和解析完成之后
            window.addEventListener('DOMContentLoaded', () => {
                this.history.current = location.hash.slice(1)
            })
            // 当路径发送改变的时候 当锚部分发生变化时执行 JavaScript:
            window.addEventListener('hashchange', () => {
                this.history.current = location.hash.slice(1)

            })
        }

    }
    // 路由映射
    createMap(routes) {
        return routes.reduce((pre, cut) => {
            pre[cut.path] = cut.component
            return pre
        }, {})
    }
}
// 当vue.use的时候会触发这个函数
Borouter.install = function (Vue) {
    // console.log("install", Vue.options)
    // console.log("vue安装插件")
    // 给vue原型链添加$router和$route   
    // 全局添加一个混合
    Vue.mixin({
        beforeCreate() {
            // 判断是不是跟组件
            if (this.$options && this.$options.router) {
                this._root = this
                this._router = this.$options.router
                // util定义响应式对象 框架自带的
                Vue.util.defineReactive(this, 'history', this._router.history)
            } else {
                // 等于他的父亲 如果他父亲有根元素就选择父亲的根元素
                this._root = this.$parent && this.$parent._root
            }
            Object.defineProperty(this, '$router', {
                get() {
                    return this._root._router
                }
            })

            Object.defineProperty(this, '$route', {
                get() {
                    return this._root._router.history.current
                }
            })
        }
    })

    // 给vue注册全局的routerr-view和router-link
    Vue.component('router-view', RouterView)

    // Vue.component('router-view', {
    //     render(h) {

    //         // 获取当前路径
    //         let current = this._self._root._router.history.current
    //         // 获取映射字典
    //         let routerMap = this._self._root._router.routesMap
    //         return h(routerMap[current])
    //     }
    // })
    // <router-link to="/">Home</router-link> to是通过props来进行传值  内容使用插槽
    Vue.component('router-link', RouterLink)
    // Vue.component('router-link', {
    //     props: {
    //         to: String
    //     },
    //     // 要渲染什么内容 h是模板 reduce是用.vue去实现的构造函数
    //     render(h) {
    //         // 获取模式 通过上一层级的跟
    //         let mode = this._self._root._router.mode
    //         // 判断当前的，模式 如果是hash就前面加#号 否则就是当前的这个to
    //         let to = mode === 'hash' ? '#' + this.to : this.to
    //         return h(
    //             'a', {
    //             attrs: { href: to }
    //         },
    //             this.$slots.default,// 插槽
    //         )
    //     }

    // })
}

// 导出
export default Borouter